﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Image_Processing_Website.WebForm1" %>
<%@ Register TagPrefix="UserControls" TagName="ImageUserControl" Src="~/UserControls/ImageUserControl.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="jquery/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
    <link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/default.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        function iFrameRefresh() {
            var x = document.getElementById("iframe").src;
            document.getElementById("iframe").src = x;
        }
    </script>

    <script src="Dialogs/adjustment.js" type="text/javascript"></script>
    

</head>
<body>
    <form id="form1" runat="server">
        <div>

            <div id="brightness-dialog-form" title="Brightness Adjustment">
	            <p class="validateTips">The Values must be between -255 and 255</p>
	            <form action="#">
	                <fieldset>
		                <label id="lblValue">Value:</label>
		                <input type="text" name="tbxValue" id="tbxValue" class="text ui-widget-content ui-corner-all" />
	                </fieldset>
	            </form>
            </div>

            <div id="contrast-dialog-form" title="Contrast Adjustment">
	            <p class="validateTips">The Values must be between -255 and 255</p>
	            <form action="#">
	                <fieldset>
		                <label id="Label1">Value:</label>
		                <input type="text" name="tbxValue" id="tbxContrastValue" class="text ui-widget-content ui-corner-all" />
	                </fieldset>
	            </form>
            </div>

            <div id="resize-dialog-form" title="Resize">
	            <p class="validateTips">The Values must be between 10 and 1000</p>
	            <form action="#">
	                <fieldset>
		                <label id="Label2">Width:</label>
		                <input type="text" name="tbxValue" id="tbxResizeValue_Width" class="text ui-widget-content ui-corner-all" />
                        <label id="Label3">Height:</label>
		                <input type="text" name="tbxValue" id="tbxResizeValue_Height" class="text ui-widget-content ui-corner-all" />
	                </fieldset>
	            </form>
            </div>

            <div id="rotateflip-dialog-form" title="Rotate & Flip">
	            <form action="#">
	                <fieldset>
                            <select id="selectable">
	                            <option class="ui-widget-content" value="Rotate90FlipNone">Rotate 90 Flip None</option>
	                            <option class="ui-widget-content" value="Rotate180FlipNone">Rotate 180 Flip None</option>
	                            <option class="ui-widget-content" value="Rotate270FlipNone">Rotate 270 Flip None</option>
                                <option class="ui-widget-content" value="RotateNoneFlipX">Rotate None Flip X</option>
                                <option class="ui-widget-content" value="Rotate90FlipX">Rotate 90 Flip X</option>
                                <option class="ui-widget-content" value="Rotate180FlipX">Rotate 180 Flip X</option>
                                <option class="ui-widget-content" value="Rotate270FlipX">Rotate 270 Flip X</option>
                                <option class="ui-widget-content" value="RotateNoneFlipY">Rotate None Flip Y</option>
                                <option class="ui-widget-content" value="Rotate90FlipY">Rotate 90 Flip Y</option>
                                <option class="ui-widget-content" value="Rotate180FlipY">Rotate 180 Flip Y</option>
                                <option class="ui-widget-content" value="Rotate270FlipY">Rotate 270 Flip Y</option>
                                <option class="ui-widget-content" value="RotateNoneFlipXY">Rotate None Flip XY</option>
                                <option class="ui-widget-content" value="Rotate90FlipXY">Rotate 90 Flip XY</option>
                                <option class="ui-widget-content" value="Rotate180FlipXY">Rotate 180 Flip XY</option>
                                <option class="ui-widget-content" value="Rotate270FlipXY">Rotate 270 Flip XY</option>
                            </select>
	                </fieldset>
	            </form>
            </div>

            <div id="history-contain" class="ui-widget">
	            <h1>Action History</h1>
	            <table id="history" class="ui-widget ui-widget-content">
		            <thead>
			            <tr class="ui-widget-header ">
				            <th>Action: </th>
				            <th>Value: </th>
			            </tr>
		            </thead>
		            <tbody>
		            </tbody>
	            </table>
            </div>

            <div id="menu">
                <input type="button" id="brightness-adjustment" value="Brightness" />
                <input type="button" id="contrast-adjustment" value="Contrast" />
                <input type="button" id="grayscale" value="Grayscale" />
                <input type="button" id="invest" value="Invest" />
                <input type="button" id="resize" value="Resize" />
                <input type="button" id="rotate-flip" value="Rotate & Flip" />
            </div>
            

        </div>

        <div id="container">
            <iframe id= "iframe" src="ImageViewer.aspx" scrolling="no" width="1000px" height="1000px" >
            </iframe>    
        </div>

        <div class="demo-description">
            <p>Use a modal dialog to require that the user enter data during a multi-step process.
          Embed form markup in the content area, set the <code>modal</code> option to true,
           and specify primary and secondary user actions with the <code>buttons</code> option.</p>
        </div>

    </form>
</body>
</html>
